// @import '~@inbiz/components/style/index.less';

// @prefix-cls: ~'@{inbiz-prefix}-TimeLine';
@gray-color: #eee;
@dot-size: 16px;
@node-margin-8: 8px;
@node-margin-10: 10px;
@nonactived-color: #ccc;
@actived-color: var(--inbiz-color-primary);

.inbiz-TimeLine {
  // font-size: 14px;
  color: var(--inbiz-color-text);
  &-title {
    margin-bottom: 20px;
    // color: #f00;
  }

  &-wrapper {
    padding-top: 0;
    padding-right: 10px;
  }

  &-dot {
    width: @dot-size;
    height: @dot-size;
    margin-top: -1px;
    background: #fff;
    border: 2px solid var(--inbiz-color-primary);
    border-radius: 50%;

    &-disabled {
      background: @gray-color;
      border-color: @gray-color !important;
    }
  }
  &-dotTR {
    transform: translateX(2px);
  }

  &-custom-dot {
    font-size: 16px;
  }

  &-contain {
    .content {
      a {
        color: var(--inbiz-color-text);
      }

      a:hover {
        color: var(--inbiz-color-primary);
      }

      &-card {
        display: inline-block;
        padding: 5px 10px;
        box-shadow: 0 6px 12px 0 #dde2f0;
      }
    }
  }
  &-contain-complete {
    .content {
      color: #999;
    }
  }

  &-contain-nonactived {
    .time,
    .content {
      color: @nonactived-color;
    }
  }

  &-contain-actived {
    .time {
      color: @actived-color;
    }

    .content {
      color: #999;
    }
  }

  &-lengthways {
    .ant-timeline-item-head {
      width: 16px;
      height: 16px;
      border-radius: 50%;
    }
    .ant-timeline-item-tail {
      top: 16px;
      left: 7px;
      // top: 16px;
    }
    .ant-timeline-item-head-custom {
      left: 7px;
    }
    .ant-timeline-item-content {
      top: -4px;
    }
    .ant-timeline.ant-timeline-right .ant-timeline-item-right .ant-timeline-item-tail {
      left: calc(100% - 1px - 2px);
    }
    .ant-timeline.ant-timeline-alternate .ant-timeline-item-head,
    .ant-timeline.ant-timeline-label .ant-timeline-item-head {
      margin-left: -7px;
    }
    .ant-timeline.ant-timeline-alternate .ant-timeline-item-head-custom,
    .ant-timeline.ant-timeline-label .ant-timeline-item-head-custom {
      margin-left: 0;
    }
    .inbiz-TimeLine-contain {
      .time {
        font-size: var(--inbiz-font-size-base);
      }
      .content {
        font-size: var(--inbiz-font-size-base);
      }
    }
  }
  &-crosswise {
    max-width: 100%;
    overflow-x: auto;
    &:hover {
      // overflow-x: auto;
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
      }
    }
    &-panel {
      display: flex;
      align-items: stretch;

      li {
        display: flex;
        flex: 1;

        .node {
          display: flex;
          align-items: center;
          margin-right: @node-margin-8;
          margin-bottom: @node-margin-10;

          .dot {
            width: @dot-size;
            height: @dot-size;
            margin-right: @node-margin-8;
            background-color: #fff;
            border: 2px solid var(--inbiz-color-primary);
            border-radius: 50%;

            &.dot-actived {
              background-color: var(--inbiz-color-primary);
            }

            &.dot-nonactived {
              border-color: @gray-color;
            }
            &.dot-expired {
              background-color: @gray-color;
              border-color: @gray-color;
            }
          }

          .line {
            flex: 1;
            min-width: 32px;
            border-bottom: 2px solid @gray-color;
          }
        }

        .time {
          margin-right: 10px;
          font-size: var(--inbiz-font-size-base);
          white-space: nowrap;
        }

        .content {
          max-width: 200px;
          margin-right: 10px;
          overflow: hidden;
          font-size: var(--inbiz-font-size-base);
          white-space: nowrap;
          text-overflow: ellipsis;
          &.content-auto {
            max-width: initial;
          }
        }
      }
    }

    /* 滚动条中的滑块设置 */
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0);
    }
  }
}
